@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

/* यूनिवर्सल बॉक्स-साइजिंग, यह सुनिश्चित करता है कि पैडिंग और बॉर्डर एलिमेंट की चौड़ाई में शामिल हों */
* {
  font-family: 'Poppins', sans-serif !important;
  box-sizing: border-box; 
}

/* बॉडी पर कोई डिफॉल्ट मार्जिन/पैडिंग नहीं */
body {
  font-family: 'Poppins', sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0; 
  /* overflow-x: hidden; */ /* हॉरिजॉन्टल स्क्रॉलिंग को रोकें यदि कोई अनपेक्षित एलिमेंट बाहर निकल रहा हो */
}

/* प्रैक्टिस हेडर */
.practice-header {
    background-color: #f2f2f2;
    padding: 5px 8px; /* पैडिंग को थोड़ा कम रखा */
    margin-bottom: 8px; /* हेडर के नीचे मार्जिन थोड़ा कम किया */
    border-radius: 0px;
    text-align: center;
    color: #000;
}

.practice-header h2 {
    margin: 0;
    font-size: 18px; /* हेडर के फ़ॉन्ट साइज़ को थोड़ा कम किया */
}

/* मुख्य कंटेनर जो सभी प्रश्नों को रखता है */
.practice-container {
    max-width: 100%; /* हमेशा 100% चौड़ाई का उपयोग करें */
    width: 100%; 
    margin: 0 auto; /* क्षैतिज रूप से केंद्र में */
    padding: 5px; /* कंटेनर के अंदर और स्क्रीन के किनारों से पैडिंग कम की */
}

/* प्रत्येक प्रश्न कार्ड */
.question-card {
  background: #ffffff;
  padding: 10px; /* प्रश्न कार्ड के अंदर पैडिंग और कम की */
  border-radius: 5px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 15px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 20px; /* कार्ड के बीच की जगह थोड़ी कम की */
  margin-top: 30px; 
}

.question-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px; /* प्रश्न हेडर के नीचे मार्जिन कम किया */
}

.question-number {
  font-weight: bold;
  font-size: 13px; /* प्रश्न संख्या का फ़ॉन्ट साइज़ थोड़ा कम किया */
  color: white;
  background-color: #000080;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px; /* प्रश्न संख्या के सर्कल का साइज़ थोड़ा कम किया */
  height: 35px;
  border-radius: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
  margin-right: 8px; /* प्रश्न संख्या और टेक्स्ट के बीच की जगह कम की */
}

.question-title {
    font-size: 15px; /* प्रश्न शीर्षक का फ़ॉन्ट साइज़ थोड़ा कम किया */
    font-weight: bold;
    color: #009999;
}

.question-text {
  font-size: 16px; /* प्रश्न टेक्स्ट का फ़ॉन्ट साइज़ थोड़ा कम किया */
  font-weight: bold;
  margin: 8px 0; /* प्रश्न टेक्स्ट के ऊपर/नीचे मार्जिन कम किया */
}

.options .option {
  font-size: 15px; /* ऑप्शन का फ़ॉन्ट साइज़ थोड़ा कम किया */
  padding: 8px; /* ऑप्शन के अंदर पैडिंग कम की */
  margin: 6px 0; /* ऑप्शन के बीच की जगह कम की */
  border: 1px solid #cccccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: background 0.3s ease;
}

.option:hover {
    background-color: #b3ffd9;
}

.option.selected {
  background-color: #bf8040; 
  border-color: #bf8040;
}

.option.correct {
  background-color: #00994d !important; 
  color: white !important;
  border-color: #00994d !important;
}

.option.wrong {
  background-color: #b30000 !important; 
  color: white !important;
  border-color: #b30000 !important;
}

.view-answer-btn {
  background-color: #008080; 
  color: white;
  padding: 4px 9px; /* बटन की पैडिंग कम की */
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 15px; /* बटन का फ़ॉन्ट साइज़ थोड़ा कम किया */
  display: block; 
  width: fit-content; 
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 15px;
  transition: background-color 0.3s ease;
}

.view-answer-btn:hover {
    background-color: #ff6600;
}

.submit-test-btn {
    background-color: #cc5200; 
    color: white;
    padding: 4px 9px; /* सबमिट बटन की पैडिंग कम की */
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 15px; /* सबमिट बटन का फ़ॉन्ट साइज़ कम किया */
    margin: 15px auto; /* सबमिट बटन के ऊपर/नीचे मार्जिन कम किया */
    display: block;
    width: fit-content;
    transition: background-color 0.3s ease;
}

.submit-test-btn:hover {
    background-color: #218838;
}

.answer-box {
  background-color: #f2f2f2; 
  border: none;
  padding: 20px; /* उत्तर बॉक्स की पैडिंग कम की */
  border-radius: 0px;
  margin-top: 10px; /* उत्तर बॉक्स के ऊपर मार्जिन कम किया */
 margin-bottom: 10px; 
  display: none; 
}

.explanation-box {
  background-color: #f2f2f2; 
  border: none;
  padding: 20px; /* स्पष्टीकरण बॉक्स की पैडिंग कम की */
  border-radius: 0px;
  margin-top: 10px; /* स्पष्टीकरण बॉक्स के ऊपर मार्जिन कम किया */
 margin-bottom: 10px; 
  display: none; 
}

.answer-text {
  font-weight: bold;
  color: #00994d; 
  margin-top: 10px;
  margin-bottom: 10px; /* उत्तर टेक्स्ट के नीचे मार्जिन कम किया */
  font-size: 16px; /* उत्तर टेक्स्ट का फ़ॉन्ट साइज़ थोड़ा कम किया */
}

.explanation-text {
  color: #000;
  line-height: 1.4; /* लाइन-हाइट थोड़ी कम की ताकि टेक्स्ट घना लगे */
  font-size: 16px; /* स्पष्टीकरण टेक्स्ट का फ़ॉन्ट साइज़ थोड़ा कम किया */
margin-top: 10px; /* स्पष्टीकरण बॉक्स के ऊपर मार्जिन कम किया */
 margin-bottom: 10px; 
}

.results-card {
    max-width: 600px;
    margin: 20px auto;
    background: #ffffff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 15px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    display: none; /* Hidden by default */
}

.results-card h2 {
    color: #0000cc;
    margin-bottom: 20px;
}

.results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.results-item {
    background-color: #f2f2f2;
  border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    color: #262626;
}
.results-item span {
    color: #000080; /* Darker color for the actual number */
}

.results-message {
    font-size: 17px; /* परिणाम मैसेज का फ़ॉन्ट साइज़ कम किया */
    font-weight: bold;
    color: #00994d; 
    margin-bottom: 20px; /* मैसेज के नीचे मार्जिन कम किया */
    margin-top: 20px;
}

.try-again-btn {
    background-color: #009999; 
    color: white;
    padding: 4px 9px; /* ट्राई अगेन बटन की पैडिंग कम की */
    border-radius: 5px;
  margin-bottom: 15px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px; /* ट्राई अगेन बटन का फ़ॉन्ट साइज़ कम किया */
    transition: background-color 0.3s ease;
}

.try-again-btn:hover {
    background-color: #5a6268;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    body {
        padding: 0; /* छोटी स्क्रीन पर body की पैडिंग 0 */
    }
    .practice-container {
        padding: 3px; /* कंटेनर की पैडिंग को और कम किया */
        margin: 0 auto; 
    }
    .question-card {
        padding: 8px; /* question-card की पैडिंग को और कम किया */
        margin-bottom: 10px; /* कार्ड के बीच का मार्जिन कम किया */
    }
    .question-number {
        width: 30px; /* छोटे स्क्रीन पर सर्कल को थोड़ा और छोटा किया */
        height: 30px;
        font-size: 12px;
        margin-right: 5px;
    }
    .question-title {
        font-size: 14px;
    }
    .question-text {
        font-size: 15px;
    }
    .options .option {
        padding: 6px; /* ऑप्शंस की पैडिंग को और कम किया */
        font-size: 14px;
        margin: 5px 0;
    }
    .view-answer-btn, .submit-test-btn, .try-again-btn {
        padding: 5px 10px; /* बटनों की पैडिंग को और कम किया */
        font-size: 14px;
    }
    .answer-box, .explanation-box {
        padding: 6px; /* उत्तर/स्पष्टीकरण बॉक्स की पैडिंग कम की */
        margin-top: 8px;
    }
    .answer-text, .explanation-text {
        font-size: 14px;
    }
    .results-card {
        padding: 10px; /* परिणाम कार्ड की पैडिंग कम की */
    }
    .results-item {
        padding: 6px; /* परिणाम आइटम की पैडिंग कम की */
        font-size: 13px;
    }
    .results-message {
        font-size: 15px;
    }
}